<template>
	<view>
		<!-- 测评部分 -->
		<view class="detecbox">
			<view class="detectime">
				{{ countdownTime }}s
			</view>
			<view class="tc">
				<view class="detecbox_item" v-for="(item, index) in list" :key="index" v-if="index == currentIndex">
					<view class="detecbox_item_sub">
						{{ item.word }}
					</view>
					<view class="mt10">
						<u-icon name="volume" color="#999999" size="30" @tap="getVoice(item.word)"></u-icon>
					</view>
					<view class="detecbox_item_tishi">
						<view class="" v-if="standingTime == 1">
							停留时间超过10s, 建议选择不认识
						</view>
					</view>
					<view class="detecbox_item_opi" :class="{'detecbox_item_opi2':correctIndex == oindex}" v-for="(oitem, oindex) in item.options_list" :key="oindex" @tap="state == 2 && selectOptions(oindex, item, oitem)">
						{{ oitem }}
					</view>
					<view class="detecbox_burenshi" v-if="state != 1" @tap="selectOptions(99, item)">
						不认识
					</view>
				</view>
			</view>
			<view class="detecbox_kaishi" v-if="state == 1" @tap="start()">
				开始测评
			</view>
			
		</view>
		<!-- 测评结束 -->
		<!-- <view class="">
			<view class="detecbox_kaishi_img">
				<image src="../../static/curr/wanc_icon.png" mode=""></image>
			</view>
			<view class="detecbox_kaishi" @click="goResult()">
				查看测试结果
			</view>
		</view> -->
		<!-- 弹出框 -->
		<view class="popup d-c-c" v-show="popupShow" @click="closePopup()">
			<view class="tis_box">
				<view class="tis_box_back">
					<image src="/static/index/popup_icon.png" mode=""></image>
				</view>
				<view class="tis_box_cen">
					<view class="tis_box_cen_img">
						<image src="/static/index/tis_icon.png" mode=""></image>
					</view>
					<view class="tis_box_cen_text">
						不认识的单词请勇敢点不认识，以 确保测试的准确性哦！  
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: getApp().globalData.imgUrl,
				type: 1, //1测评页面 2测评结果
				popupShow: true, //弹出框是否显示
				state: 1, //1还未开始测评 2已经开始测评
				standingTime: 2, //停留时间超过10秒
				currentIndex: 0, //展示为第几题
				correctIndex: 5, //第几项是正确选项，给予不同样式 
				list: [],
				group: '',
				countdownTime: 15, //计时器总秒数
				timer: null, //计时器
				score: 0, //得分
				wrongNum: 0, //连续错3个自动退出
				rightVoiceSrc: '/static/audio/check_right.mp3',
				wrongVoiceSrc: '/static/audio/check_wrong.mp3',
			}
		},
		onLoad() {
			this.getList()
			// const commonData = this.$store.state.commonData
			// this.rightVoiceSrc = commonData.right_voice
			// this.wrongVoiceSrc = commonData.wrong_voice
		},
		methods: {
			getList() {
				this.$u.post(this.$u.api.examWordList, {
					type: this.$store.state.testType
				}).then((res) => {
					this.list = res.data.list
					this.group = res.data.group
				}).catch((err) => {
					console.log(err)
				})
			},
			// 获取单词音频
			getVoice(word) {
				this.$u.post(this.$u.api.wordVoice, {
					word: word,
					type: this.$store.state.voiceType
				}).then((res) => {
					this.utils.playAudio(this.imgUrl + res.data)
				}).catch((err) => {
					// console.log(err)
					uni.$u.toast(err.data.msg)
				})
			},
			// 关闭弹框
			closePopup(){
				this.popupShow = false
			},
			// 开始测评
			start(){
				this.state = 2
				this.startCountdown()
			},
			// 选择哪一项
			selectOptions(i, e, o){
				console.log(e)
				if (i == 99) {
					this.postexaman_w(o,e)
					this.utils.playAudio(this.wrongVoiceSrc)
					this.wrongNum++
				} else {
					this.correctIndex = i//e.answer_key
					if (i == e.answer_key) {
						this.postexaman_r(o,e)
						this.utils.playAudio(this.rightVoiceSrc)
						this.wrongNum = 0
						this.score += e.score
					} else {
						this.postexaman_w(o,e)
						this.utils.playAudio(this.wrongVoiceSrc)
						this.wrongNum++
					}
				}
				if (this.wrongNum == 3) {
					// this.type = 2
					uni.navigateTo({
						url: '/pages/user/exam/report?score=' + this.score
					})
				}
				setTimeout(() =>{
					this.clearCountdown();
					this.currentIndex++
					this.countdownTime = 15
					this.standingTime = 2
					this.startCountdown()
				}, 800)
			},
			
			// 开始倒计时
			startCountdown() {
				this.correctIndex = 5
				if (this.currentIndex < this.list.length) {
					this.timer = setInterval(() => {
						if (this.countdownTime > 0) {
							this.countdownTime--
							if(this.countdownTime == 5){
								this.standingTime = 1
							}
						} else {
							this.clearCountdown();
						}
					}, 1000)
				} else {
					this.clearCountdown()
					// 跳转到结果页面
					// this.type = 2
					uni.navigateTo({
						url: '/pages/user/exam/report?score=' + this.score
					})
				}
			},
			postexaman_w(an,ex){
				
				this.$u.post(this.$u.api.postexams, {
					exid: ex.id,
					exan: ex.answer,
					exsc: ex.score,
					anse: an,
					groupid: this.group
				}).then((res) => {
					
				}).catch((err) => {
					console.log(err)
				})
			},
			postexaman_r(an,ex){
				
				this.$u.post(this.$u.api.examSubmit, {
					exid: ex.id,
					exan: ex.answer,
					exsc: ex.score,
					anse: an,
					groupid: this.group,
					score: ex.score
				}).then((res) => {
					
				}).catch((err) => {
					console.log(err)
				})
			},
			// 清除倒计时
			clearCountdown() {
				clearInterval(this.timer)
				this.timer = null
			},
			// 跳转结果页面
			goResult() {
				uni.navigateTo({
					url: '/pages/user/exam/report?score=' + this.score
				})
			},
		}
	}
</script>

<style lang="less">
	.detecbox {
		padding: 0 30rpx;
	}

	.detectime {
		width: 66rpx;
		height: 66rpx;
		background: linear-gradient(45deg, #FE6C1A, #FFA776);
		border-radius: 50%;
		text-align: center;
		line-height: 66rpx;
		color: #ffffff;
		font-weight: bold;
		font-size: 28rpx;
		position: absolute;
		/* #ifdef APP */
		top: 7vh;
		/* #endif */
		/* #ifdef H5 */
		top: 30rpx;
		/* #endif */
		right: 30rpx;

	}

	.detecbox_item {
		padding: 6vh 20rpx 0;
	}

	.detecbox_item_sub {
		font-weight: 800;
		font-size: 70rpx;
		color: #387BEF;
	}

	.detecbox_item_tishi {
		height: 12vh;
		box-sizing: border-box;
		color: #888888;
		font-size: 30rpx;
		text-align: center;
		line-height: 12vh;
	}

	.detecbox_item_opi {
		width: 650rpx;
		height: 110rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		text-align: center;
		line-height: 110rpx;
		margin: 0 auto 20rpx;
	}
	.detecbox_item_opi2 {
		width: 650rpx;
		height: 110rpx;
		background: linear-gradient(90deg, #1F93FF, #387BEF);
		color: #FFFFFF;
		border-radius: 20rpx;
		text-align: center;
		line-height: 110rpx;
		margin: 0 auto 20rpx;
	}

	.detecbox_kaishi {
		width: 650rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #1F93FF, #387BEF);
		border-radius: 50rpx;
		text-align: center;
		line-height: 100rpx;
		color: #ffffff;
		margin: 60rpx auto 0;
	}

	.detecbox_burenshi {
		width: 650rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #999999, #C8C4C4);
		border-radius: 50rpx;
		text-align: center;
		line-height: 100rpx;
		color: #ffffff;
		margin: 60rpx auto 0;
	}
	.detecbox_kaishi_img{
		width: 474rpx;
		height: 327rpx;
		margin: 200rpx auto;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.popup{
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0,0,0,0.6);
		z-index: 9998;
	}
	.tis_box{
		width: 490rpx;
		height: 338rpx;
		position: relative;
	}
	.tis_box_back{
		image{
			width: 490rpx;
			height: 338rpx;
		}
	}
	.tis_box_cen{
		width: 490rpx;
		height: 338rpx;
		position: absolute;
		top: 0;
		left: 0;
		text-align: center;
	}
	.tis_box_cen_img image{
		width: 97rpx;
		height: 92rpx;
		margin-top: -27rpx;
	}
	.tis_box_cen_text{
		font-weight: 800;
		font-size: 28rpx;
		color: #333333;
		line-height: 56rpx;
		margin: 54rpx 35rpx 0;
	}
</style>
